<template>
  <el-descriptions
    class="global-descriptions"
    title="交易信息"
    border
    :column="1"
    v-loading="loadData.detail"
  >
    <el-descriptions-item label="订单成交数量">
      <el-link type="primary" @click="handleNavTo('/order_list')"
        >{{ detailData?.orderNum }} 笔</el-link
      >
    </el-descriptions-item>
    <el-descriptions-item label="售后订单数量">
      <el-link type="primary" @click="handleNavTo('/appeal_list')"
        >{{ detailData?.appealNum }} 笔</el-link
      >
    </el-descriptions-item>
    <el-descriptions-item label="提现申请数量">
      <el-link type="primary" @click="handleNavTo('/capital_list')"
        >{{ detailData?.capitalNum }} 笔</el-link
      >
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { PropType, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { actionStatModule } from '@/apis/stat';

const router = useRouter();

// 加载状态
// const isLoading = ref(false);
const loadData = reactive({
  detail: false,
  update: false,
  unique: false
});

interface DetailData {
  orderNum: number;
  appealNum: number;
  capitalNum: number;
}

// 详情
const detailData = ref<DetailData>();

// props
const props = defineProps({
  rowData: {
    // type: Object as PropType<TempsPost>,
    type: Object as PropType<API.user.EntitySchema>,
    default: () => ({})
  }
});

/**
 * 跳转路由
 * @param path
 */
const handleNavTo = (path: string) => {
  // 跳转登录
  router.push({ path, query: { userOwnId: props.rowData.ownId } });
};

// 获取详情
const requestDataDetail = () => {
  loadData.detail = true;
  actionStatModule<DetailData>('statByUserTrade', {
    userOwnId: props.rowData.ownId
  })
    .then((res) => {
      loadData.detail = false;
      detailData.value = res.data;
    })
    .catch(() => {
      loadData.detail = false;
    });
};

requestDataDetail();
</script>

<style lang="scss" scoped></style>
